今天就來接續昨天未完成的

前端插件大概可以分成

• HTML
• CSS
• JavaScript
• JavaScript框架

所以插件分類和用途可以以上面範圍去找

再來就是不管是不是前端
寫程式有Git 就需要的版控插件

接下來先介紹前端插件

HTML Snippets

自動幫忙跳出HTML相關標籤和文字，幫助快速選擇，這樣就不必全部打完瞜

Auto Close Tag

新手常犯的錯誤就是寫了開頭的HTML標籤，但是忘記寫結尾標籤，導致報錯。
這個插件會在你打 > 這個符號時，自動幫你把結尾標籤產生出來

例如
打<div
在你打出> 後，就會自動幫你變成

<div> </div>

這樣就省了不少工夫了呢

Auto Rename Tag

這個也是很好用
因為HTML標籤是對應的
新手也常改了前面忘記改對應的結尾標籤
這個插件自動幫你做變動，
唯一缺點就是吃到ㄅㄆㄇㄈ等注音就會無法連動

舉例

<div> </div> 

想改成

<header></header>

只要修改第一個後面的就會幫你改，改的過程中會像這樣

<hea> </hea>

JavaScript (ES6) code snippets

這個和上面HTML snippets類似，就是邊打code會幫你叫出可以用的javascript字詞

ESLint

這個其實要和prettier搭配著用
因為這個是可以幫你幫你找出語法錯誤，以及程式碼的撰寫風格統一

如果有點自學的同學，應該除了JavaScript之外，也有聽過TypeScript
那也可以安裝

TypeScript就想成在JavaScript上多包一層，讓撰寫時也能有強型別的特性
詳細的之後會再介紹

再來就是版控工具，Git 是什麼這個之後也會說，反正這邊的插件先安裝就對了 XD

compareit

是一個可以幫你對照程式碼哪邊有增減，並用顏色來顯示差異的一個插件，
這樣就可以一眼看出到底改了哪裡

Git History

會幫你列出這條git是誰的，並幫忙整理脈絡

GitLens — Git supercharged

可以讓你在打code時
直接看到底是誰改過這段code的

蠻神的功能 XD

插件東西比想像中還要多....明天把框架套件收尾，然後開始帶一些後面議題